<template>
  <div class="product-list-render-view">
    <div class="scroll-wrapper">
      <div ref="scroll" class="scroll">
        <ul class="product-wrapper">
          <li v-for="(item,index) in list" :key="index" @click="goDetail(item)" ref="productList">
            <div class="title">
              <div class="inner">
                <div class="left">
                  <i :style="bgLogo(item.filePath)"></i>
                  <p>{{item.name}}</p>
                </div>
                <span class="amount">已有{{item.applyNumber}}人成功借款</span>
              </div>
            </div>

            <div class="product">
              <div class="inner">
                <div class="left-box">
                  <p class="money">
                    <span>{{item.minAmount}}</span>-<span>{{item.maxAmount}}</span>
                  </p>
                  <p class="text">最高可借（元）</p>
                </div>

                <div class="right-box">
                  <div class="condition clearfix">
                    <span class="period">周  期：{{item.period}}天</span>
                    <button type="button">立即借钱</button>
                  </div>
                  <p class="slogan">{{item.slogan}}</p>
                </div>
              </div>

            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import api from "@/api/product";
import { mapGetters } from "vuex";

const SUCCESS = 0;
export default {
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  mounted() {
    this._initScroll();
  },
  destroyed() {
    this.scroll && this.scroll.destroy();
  },
  methods: {
    _initScroll() {
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.scroll, {
          mouseWheel: true,
          probeType: 3
        });
      });
    },
    bgLogo(logo) {
      return { backgroundImage: "url(" + logo + ")" };
    },
    goDetail(item) {
      //先验证是否登录了
      this.phone = this.getUserPhone;
      if (!this.phone) {
        this.$toast("请先登录");
        this.$router.push({
          path: "/login"
        });
        return;
      }
      api.addProductClickTimes(item.id, this.phone).then(response => {
        if (response.code == SUCCESS) {
          console.log("click +1!");
        }
      });
      // window.location.href = item.link;
    }
  },
  computed: {
    ...mapGetters(["getUserPhone"])
  }
};
</script>

<style lang="less">
@import "./product-list.less";
</style>
